<!DOCTYPE html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理表格</title>
<!-- layui样式包-必要 -->
<link href="${basePath!}/static/layui/css/layui.css" type="text/css" media="screen" rel="stylesheet"/>

<!-- jquery插件包-必要 -->
<!-- 这个是所有jquery插件的基础，首先第一个引入 -->
<script src="${basePath!}/static/js/jquery.min.js" type="text/javascript"></script>
<script src="${basePath!}/static/layui/layui.js" type="text/javascript"></script>
<script src="${basePath!}/static/layui/lay/modules/layui-xtree.js" type="text/javascript"></script>
<base href="${basePath!}/">

</head>
<body>
<div class="layui-btn-group">
    <button class="layui-btn" id="add">增加</button>
</div>

<table id="list" lay-filter="operations"></table>

<#--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓tree↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
<form class="layui-form" id="xtree" hidden>
    <div id="xtreediv">
    </div>
</form>
<#--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓tree↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->



<#--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓add↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
<#--带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应-->
<div id="adddivid" class="layui-fluid" style="margin: 15px;" hidden>
    <form class="layui-form" action="" id="addformid">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" lay-verify="name" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addsubmit">立即提交</button>
                <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
<#--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑add↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->

</body>
</html>



<script type="text/javascript">
    var layerid;//当前弹层id;这个id可以定义多个，主要的目的是为了在回调函数关闭弹层时使用的
    layui.use(['layer','form','table','treeGrid'], function(){
        var layer = layui.layer,
            form = layui.form,
            table = layui.table,
            treeGrid = layui.treeGrid;

        //添加按钮点击事件
        $("#add").click(function () {
            $("#reset").click();//重置表单内容
            layerid = layer.open({
                skin: 'layui-layer-molv',
                area:'30%',
                type: 1,
                title:'新建角色',
                shadeClose:true,
                content: $('#adddivid') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        });

        //监听提交
        form.on('submit(addsubmit)', function(data) {

            //为了防止form中的id值被重置后置空,将编辑的id存放在label中
            $.ajax({
                type: "POST",
                url: "admin/role/save",
                data: data.field,
                async: false,
                error: function(request) {
                    layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                },
                success: function(data) {
                    if(data.code == 500){
                        layer.alert(data.msg);
                    }
                    if(data.code == 200){
                        layer.open({
                            skin: 'layui-layer-molv',
                            content: '操作成功！',
                            btn:['确定'],
                            shadeClose:true,
                            end: function(){
                                //消息提示结束后回调，关闭上一级 新建or编辑 表单所在弹层，刷新页面
                                layer.closeAll();
                                $(".layui-laypage-btn")[0].click();
                            }
                        });

                    }
                }
            });
            return false;
        });

        table.render({
            elem: '#list',
            height: 500,
            url: 'admin/role/list',
            method:'post',
            page: true, //开启分页
            cols: [[ //表头
                {title: '序号', width:80, align: 'center',
                    templet: function(obj){
                        return obj.LAY_TABLE_INDEX + 1;
                }},
                {field: 'name', edit: 'text', title: '角色名称', width:200, align: 'center'},
                {field: 'rolePermission', title: '角色权限'},
                {fixed: 'right',
                    width:200,
                    align:'center',
                    toolbar: '#roleOperations'}
            ]],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 200, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data', //数据列表的字段名称，默认：data
            }
        });

        //监听工具条
        table.on('tool(operations)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            var roleId = data.id;
            if(layEvent === 'setPermission'){ //设置权限
                    var xtree;
                    $.ajax({
                        type: 'post',
                        url: 'admin/role/permission/listPermiByRoleId',
                        data: {roleId: roleId},
                        async: false,
                        error: function (request) {
                            layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                        },
                        success: function (result) {
                            xtree = new layuiXtree({
                                elem: 'xtreediv', //放xtree的容器（必填，只能为id，注意不带#号）
                                form: form,              //layui form对象 （必填）
                                data: eval( "(" + result.data + ")" )              //数据，数据结构下面会介绍 （必填）
                            });
                        }
                    });

                layerid = layer.open({
                        skin: 'layui-layer-molv',
                        content: $('#xtree'),
                        type:1,
                        title: '设置权限',
                        btn: ['确定', '取消'],//定义两个按钮，是和否
                        yes: function(){
                            var checkeds = xtree.GetChecked(); //这是方法
                            var permissionIds = '';
                            for (var i=0; i<checkeds.length; i++){
                                if (i != 0){
                                    permissionIds += ',';
                                }
                                permissionIds += checkeds[i].value;
                            }
                            $.ajax({
                                type: "POST",
                                url:"admin/role/permission/roleEditoyPermis",
                                data:{roleId: roleId,
                                    permissionIds: permissionIds},
                                async: false,
                                error: function(request) {
                                    layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                                },
                                success: function(data) {
                                    if(data.code=='500'){
                                        layer.alert("角色绑定权限不能为空");
                                        return false;
                                    }
                                    if (data.code == '200'){
                                        //打开成功消息提示
                                        layer.open({
                                            skin: 'layui-layer-molv',
                                            content: '权限修改成功！',
                                            btn:['确定'],
                                            shadeClose:true,
                                            end: function(){
                                                // 关闭弹窗
                                                layer.close(layerid);//消息提示结束后回调，关闭上一级新建表单所在弹层
                                                $(".layui-laypage-btn")[0].click();
                                            }
                                        });

                                    }
                                }
                            });
                            }
                    });

                } else if(layEvent === 'del'){ //删除
                layer.open({
                    skin: 'layui-layer-molv',
                    content: '请确定是否真的要删除id为'+data.id+'的记录?',
                    btn: ['确定', '取消'],//定义两个按钮，是和否
                    yes: function(index, layero){//点击是时候的回调
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                        $.ajax({
                            type: "POST",
                            url:"admin/role/delete",
                            data:{id:data.id},
                            async: false,
                            error: function(request) {
                                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                            },
                            success: function(data) {
                                if(data.code==500){
                                    layer.alert(data.msg);
                                }
                                if(data.code==200){
                                    //打开成功消息提示
                                    layer.open({
                                        skin: 'layui-layer-molv',
                                        content: '角色删除成功！',
                                        btn:['确定'],
                                        shadeClose:true,
                                        end: function(){
                                            layer.close(layerid);//消息提示结束后回调，关闭上一级新建表单所在弹层
                                            $(".layui-laypage-btn")[0].click();
                                        }
                                    });

                                }
                            }
                        });
                    }
                });
            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    skin: 'layui-layer-molv',
                    content: '请确定是否真的要保存编辑昵称为'+data.id+'的记录?',
                    btn: ['确定', '取消'],//定义两个按钮，是和否
                    yes: function(index, layero){//点击是时候的回调
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                        $.ajax({
                            type: "POST",
                            url:"admin/role/update",
                            data:data,
                            async: false,
                            error: function(request) {
                                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                            },
                            success: function(data) {
                                if(data.code==500){
                                    layer.alert(data.msg);
                                }
                                if(data.code==200){
                                    //打开成功消息提示
                                    layer.open({
                                        skin: 'layui-layer-molv',
                                        content: '编辑成功！',
                                        btn:['确定'],
                                        shadeClose:true,
                                        end: function(){
                                            layer.close(layerid);//消息提示结束后回调，关闭上一级新建表单所在弹层
                                            $(".layui-laypage-btn")[0].click();
                                        }
                                    });

                                }
                            }
                        });
                    }
                });

            }
        });

    });


</script>

<script type="text/html" id="roleOperations">
    <a class="layui-btn layui-btn-xs" lay-event="setPermission" id="setPermission">权限</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">保存</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="del">删除</a>
</script>